<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8">
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="cache-control" content="max-age=604800" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="author" content="Bootstrap-ecommerce by Vosidiy">

    <title>酒店列表</title>

    <link href="/images/favicon.ico" rel="shortcut icon" type="image/x-icon">

    <!-- jQuery -->
    <script src="/js/jquery-2.0.0.min.js" type="text/javascript"></script>

    <!-- Bootstrap4 files-->
    <script src="/js/bootstrap.bundle.min.js" type="text/javascript"></script>
    <link href="/css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- Font awesome 5 -->
    <link href="/fonts/fontawesome/css/fontawesome-all.min.css" type="text/css" rel="stylesheet">

    <!-- custom style -->
    <link href="/css/ui.css" rel="stylesheet" type="text/css"/>
    <link href="/css/responsive.css" rel="stylesheet" media="only screen and (max-width: 1200px)" />

    <!-- custom javascript -->
    <script src="/js/script.js" type="text/javascript"></script>

    <script type="text/javascript">
        /// some script

        // jquery ready start
        $(document).ready(function() {
            // jQuery code

        });
        // jquery end

    </script>

</head>

<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <form action="/HTML/userInfo" method="post" name="showUserInfoForm" >
        <a class="navbar-brand" href="javascript:history.go(-1)" name="savesubmit" id="savesubmit"> <img class="logo" src="/images/logo-white.png" th:text="'  '+'酒店列表'"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    </form>
    <form method="post" action="/HTML/listToMap">
        <li class="nav-item">
            <button class="btn ml-2 btn btn-outline-secondary "style="color:#ffffff" >地图形式展示搜索结果</button>
        </li>
    </form>
    <div class="collapse navbar-collapse" id="navbar1">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="btn ml-2 btn-outline-danger" href="/HTML/relogin">退出登录<span class="sr-only">(current)</span></a>
            </li>
            <li class="new-item">
                <a class="btn ml-2 btn-outline-success" href="/HTML/home">返回主页</a>
            </li>
            <form action="/HTML/lookOrderList" method="post" name="showUserOrderForm" th:value="${account}">
                <li class="nav-item">
                    <a class="btn ml-2 btn-outline-primary" href="javascript:showUserOrderForm.submit();">我的订单<span class="sr-only">(current)</span></a>
                </li>
            </form>
            <li class="nav-item">
                <a class="btn ml-2 btn-outline-warning" href="javascript:showUserInfoForm.submit();">个人资料</a>
            </li>
        </ul>
    </div>
</nav>
<!-- ========================= SECTION PAGETOP ========================= -->

<section class="section-pagetop bg-secondary">
    <div class="container clearfix">
        <h1 class="title-page">速订</h1>
        <h4 class="title-page">酒店辅助订购系统</h4>

        <!--<nav class="float-left">-->
        <!--<ol class="breadcrumb text-white">-->
        <!--<li class="breadcrumb-item"><a href="/HTML/home">Home</a></li>-->
        <!--<li class="breadcrumb-item"><a href="#">Library</a></li>-->
        <!--<li class="breadcrumb-item active" aria-current="page">Data</li>-->
        <!--</ol>-->
        <!--</nav>-->
    </div> <!-- container //  -->
</section>
<!-- ========================= SECTION INTRO END// ========================= -->

<!-- ========================= SECTION CONTENT ========================= -->
<section class="section-content bg padding-y">
    <div class="container">

        <div class="row">
            <aside class="col-sm-3">
                <form method="post" action="/HTML/searchByFilterTo">
                <button class="btn btn-outline-primary btn-block"> 对结果不满意？设置过滤条件后过滤&nbsp;<i class="fa fa-search"></i></button>
                <br>
                <div class="card card-filter">
                    <article class="card-group-item">
                        <header class="card-header">
                            <a class="" aria-expanded="true" href="#" data-toggle="collapse" data-target="#collapse11">
                                <i class="icon-action fa fa-chevron-down"></i>
                                <h6 class="title">目标城市</h6>
                            </a>
                        </header>
                        <div style="" class="filter-content collapse show" id="collapse11">
                            <div class="card-body">
                                <input list="chooseCity" placeholder="请选择目标城市" style="width: 100%" class="form-control" type="text" id="city" name="city">
                                <datalist id="chooseCity">
                                    <option value="北京">
                                    <option value="上海">
                                    <option value="广州">
                                    <option value="深圳">
                                    <option value="杭州">
                                    <option value="成都">
                                    <option value="合肥">
                                    <option value="宁夏">
                                    <option value="成都">
                                    <option value="西安">
                                    <option value="南昌">
                                    <option value="沈阳">
                                    <option value="济南">
                                    <option value="厦门">
                                    <option value="福州">
                                    <option value="宁波">
                                    <option value="无锡">
                                    <option value="苏州">
                                    <option value="长沙">
                                    <option value="武汉">
                                    <option value="天津">
                                    <option value="石家庄">
                                    <option value="南京">
                                    <option value="重庆">
                                </datalist>
                            </div> <!-- card-body.// -->
                        </div> <!-- collapse .// -->
                    </article> <!-- card-group-item.// -->
                    <article class="card-group-item">
                        <header class="card-header">
                            <a class="" aria-expanded="true" href="#" data-toggle="collapse" data-target="#collapse22">
                                <i class="icon-action fa fa-chevron-down"></i>
                                <h6 class="title">品牌(城市便捷、如家、维也纳等)</h6>
                            </a>
                        </header>
                        <div style="" class="filter-content collapse show" id="collapse22">
                            <div class="card-body">
                                <form class="pb-3">
                                    <div class="input-group">
                                        <input list="chooseBrand" class="form-control" placeholder="输入品牌关键字" type="text" id="brand" name="brand">
                                        <datalist id="chooseBrand">
                                            <option value="维也纳">
                                            <option value="速8">
                                            <option value="如家">
                                            <option value="锦江之星">
                                            <option value="川投">
                                            <option value="快捷">
                                            <option value="银河">
                                        </datalist>
                                    </div>
                                </form>
                                <!--多选框-->
                                <!--<ul class="list-unstyled list-lg">-->
                                <!--<li><a href="#">Cras justo odio <span class="float-right badge badge-light round">142</span> </a></li>-->
                                <!--<li><a href="#">Dapibus ac facilisis  <span class="float-right badge badge-light round">3</span>  </a></li>-->
                                <!--<li><a href="#">Morbi leo risus <span class="float-right badge badge-light round">32</span>  </a></li>-->
                                <!--<li><a href="#">Another item <span class="float-right badge badge-light round">12</span>  </a></li>-->
                                <!--</ul>-->
                            </div> <!-- card-body.// -->
                        </div> <!-- collapse .// -->
                    </article> <!-- card-group-item.// -->
                        <article class="card-group-item">
                            <header class="card-header">
                                <a href="#" data-toggle="collapse" data-target="#collapse33" >
                                    <i class="icon-action fa fa-chevron-down"></i>
                                    <h6 class="title">价格区间</h6>
                                </a>
                            </header>
                            <div class="filter-content collapse show" id="collapse33">
                                <div class="card-body">

                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <input class="form-control" placeholder="最低价" type="number" name="priceLow">
                                        </div>
                                        <div class="form-group text-right col-md-6">
                                            <input class="form-control" placeholder="最高价" type="number" name="priceTop">
                                        </div>
                                    </div> <!-- form-row.// -->
                                </div> <!-- card-body.// -->
                            </div> <!-- collapse .// -->
                        </article> <!-- card-group-item.// -->
                    <!--星级-->
                    <article class="card-group-item">
                        <header class="card-header">
                            <a href="#" data-toggle="collapse" data-target="#collapse44">
                                <i class="icon-action fa fa-chevron-down"></i>
                                <h6 class="title">最低评分(0表示不限制)</h6>
                            </a>
                        </header>
                        <div class="filter-content collapse show" id="collapse44">
                            <div class="card-body">
                                <input type="range" class="custom-range" min="0" max="10" value="0" name="rate" id="rate">
                                <div class="form-row">
                                    <div class="form-group col-md-12" style="font-size: 14px">
                                        <label>&nbsp;0&nbsp;&nbsp;&nbsp;</label>
                                        <label>1&nbsp;&nbsp;&nbsp;</label>
                                        <label>2&nbsp;&nbsp;&nbsp;</label>
                                        <label>3&nbsp;&nbsp;&nbsp;</label>
                                        <label>4&nbsp;&nbsp;&nbsp;</label>
                                        <label>5&nbsp;&nbsp;&nbsp;</label>
                                        <label>6&nbsp;&nbsp;&nbsp;</label>
                                        <label>7&nbsp;&nbsp;&nbsp;</label>
                                        <label>8&nbsp;&nbsp;&nbsp;</label>
                                        <label>9&nbsp;&nbsp;&nbsp;</label>
                                        <label>10</label>
                                    </div>
                                </div> <!-- form-row.// -->
                            </div> <!-- card-body.// -->
                        </div> <!-- collapse .// -->
                    </article> <!-- card-group-item.// -->
                    <!--星级-->
                    <article class="card-group-item">
                        <header class="card-header">
                            <a href="#" data-toggle="collapse" data-target="#collapse55">
                                <i class="icon-action fa fa-chevron-down"></i>
                                <h6 class="title">最低星级(0表示不限制)</h6>
                            </a>
                        </header>
                        <div class="filter-content collapse show" id="collapse55">
                            <div class="card-body">
                                <input type="range" class="custom-range" min="0" max="5" value="0" name="star" id="star">
                                <div class="form-row">
                                    <div class="form-group col-sm-12" style="font-size: 14px">
                                            <label>&nbsp;&nbsp;0&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                            <label>1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                            <label>2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                            <label>3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                            <label>4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                            <label>5</label>
                                </div> <!-- form-row.// -->
                            </div> <!-- card-body.// -->
                        </div> <!-- collapse .// -->
                        </div>
                    </article> <!-- card-group-item.// -->

                    <!--单选框-->
                        <article class="card-group-item">
                            <header class="card-header">
                                <a href="#" data-toggle="collapse" data-target="#collapse66">
                                    <i class="icon-action fa fa-chevron-down"></i>
                                    <h6 class="title">特殊要求</h6>
                                </a>
                            </header>
                            <div class="filter-content collapse show" id="collapse66">
                                <div class="card-body">
                                    <form>
                                        <label class="form-check">
                                            <input class="form-check-input" value="" type="checkbox">
                                            <span class="form-check-label"><span class="float-right badge badge-light round">2374</span>免费Wifi</span>
                                        </label>  <!-- form-check.// -->
                                        <label class="form-check">
                                            <input class="form-check-input" value="" type="checkbox">
                                            <span class="form-check-label"><span class="float-right badge badge-light round">1798</span>有窗</span>
                                        </label> <!-- form-check.// -->
                                        <label class="form-check">
                                            <input class="form-check-input" value="" type="checkbox">
                                            <span class="form-check-label"><span class="float-right badge badge-light round">1443</span>行李寄存</span>
                                        </label>  <!-- form-check.// -->
                                        <label class="form-check">
                                            <input class="form-check-input" value="" type="checkbox">
                                            <span class="form-check-label"><span class="float-right badge badge-light round">1126</span>免押金</span>
                                        </label>  <!-- form-check.// -->
                                        <label class="form-check">
                                            <input class="form-check-input" value="" type="checkbox">
                                            <span class="form-check-label"><span class="float-right badge badge-light round">877</span>有小孩</span>
                                        </label>  <!-- form-check.// -->
                                        <label class="form-check">
                                            <input class="form-check-input" value="" type="checkbox">
                                            <span class="form-check-label"><span class="float-right badge badge-light round">500</span>停车场</span>
                                        </label>  <!-- form-check.// -->
                                        <label class="form-check">
                                            <span class="text-muted" style="font-size: small">剩余200+项...</span>
                                        </label>  <!-- form-check.// -->
                                    </form>
                                </div> <!-- card-body.// -->
                            </div> <!-- collapse .// -->
                        </article> <!-- card-group-item.// -->
                </div> <!-- card.// -->
            </form>
            </aside> <!-- col.// -->
            <main class="col-sm-9">
                <div class="card card-product " th:each="hotel: ${hotels}">
                    <div class="card-body">
                        <div class="row" >
                            <aside class="col-sm-3">
                                <div class="img-wrap"><img th:src="@{${hotel.photo1}}" class="rounded mx-auto d-block"></div>
                            </aside> <!-- col.// -->
                            <article class="col-sm-6">
                                <h4 class="title" th:text="${hotel.hotelTranslatedName}"></h4>
                                <div class="rating-wrap  mb-2">
                                    <ul class="rating-stars">
                                        <li  class="stars-active" >
                                            <i class="fa fa-star" th:each="sl,slIndex: ${slist}" th:if="${slIndex.index}lt${hotel.starRating}"></i>
                                        </li>
                                        <li>
                                            <i class="fa fa-star" th:each="sl,slIndex: ${slist}"></i>
                                        </li>
                                    </ul>
                                    <div class="label-rating">132 reviews</div>
                                    <div class="label-rating">154 orders </div>
                                </div> <!-- rating-wrap.// -->
                                <p th:text="'Address：'+${hotel.addressline1}">  </p>
                                <dl class="dlist-align">
                                    <dt>英文名</dt>
                                    <dd th:text="${hotel.hotelName}"></dd>
                                </dl>  <!-- item-property-hor .// -->
                                <dl class="dlist-align">
                                    <dt>开业时间</dt>
                                    <dd th:text="${hotel.yearopened}+'&nbsp;'"></dd>
                                </dl>  <!-- item-property-hor .// -->
                                <dl class="dlist-align">
                                    <dt>装修时间</dt>
                                    <dd th:text="${hotel.yearrenovated}+'&nbsp;'"></dd>
                                </dl>  <!-- item-property-hor .// -->
                            </article> <!-- col.// -->
                            <aside class="col-sm-3 border-left">
                                <div class="action-wrap">
                                    <div class="price-wrap h4">
                                        <span class="price"> 当日最高价 </span>
                                        <span class="text-danger" th:text="${hotel.priceTop}"></span>
                                        <br>
                                        <span class="price"> 当日最低价 </span>
                                        <span class="text-primary" th:text="${hotel.priceLow}"></span>
                                        <!--<del class="price-old"> $98</del>-->
                                    </div> <!-- info-price-detail // -->
                                    <br>
                                    <p class="text-success">房价在一天之内可能会有所变动，抓紧下单</p>
                                    <table>
                                        <thead>
                                        <tr>
                                            <th>
                                                <form action="/HTML/reHotelInfo" method="post" >
                                                    <input  name="hotelId" th:value="${hotel.hotelId}" type="hidden">
                                                    <button  class="btn btn-outline-primary " type="submit" >酒店详情</button>
                                                </form>
                                            </th>
                                            <th>
                                                <form action="/HTML/createOrderFromList" method="post" >
                                                    <input  name="hotelId" th:value="${hotel.hotelId}" type="hidden">
                                                    <button  class="btn btn-outline-info" type="submit" >创建订单</button>
                                                </form>
                                            </th>
                                        </tr>
                                        </thead>
                                    </table>
                                    <!--<a href="#" class="btn btn-warning">创建订单</a>-->
                                    </box>
                                    <!--<a href="#"><i class="fa fa-heart"></i> Add to wishlist</a>-->
                                </div> <!-- action-wrap.// -->
                            </aside> <!-- col.// -->
                        </div> <!-- row.// -->
                    </div> <!-- card-body .// -->
                </div> <!-- card product .// -->
            </main> <!-- col.// -->
        </div>
    </div> <!-- container .//  -->
</section>
<!-- ========================= SECTION CONTENT END// ========================= -->

<!-- ========================= SECTION  ========================= -->
<section class="section-name bg-white padding-y">
    <div class="container">
        <h4>Another section if needed</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div><!-- container // -->
</section>
<!-- ========================= SECTION  END// ========================= -->


<!-- ========================= FOOTER ========================= -->
<footer class="section-footer bg-dark white">
    <div class="container">
        <section class="footer-bottom row">
            <div class="col-sm-6">
                <p> 四川大学实训项目 <br>  第六组作品</p>
            </div>
            <div class="col-sm-6">
                <p class="text-sm-right">
                    2019 · 7 · 8 <br>
                    中国 · 成都
                    <!--<a href="http://bootstrap-ecommerce.com">Bootstrap-ecommerce UI kit</a>-->
                </p>
            </div>
        </section> <!-- //footer-top -->
    </div><!-- //container -->
</footer>
<!-- ========================= FOOTER END // ========================= -->
<script>
    function showNuber(obj){
        var number=document.getElementById(obj.id).value;
        document.getElementById("priceLowrange").innerHTML=number;
    }
    function seleceSearchWay() {
            var searchWay=document.getElementById("selectSearch");
            var index=searchWay.selectedIndex;
            var value=searchWay.options[index].value;
            if(value=="option1"){
                document.getElementById("searchByOption").action="/HTML/searchByKeyword";
            }
            else if(value=="option2"){
                document.getElementById("searchByOption").action="/HTML/searchByMap";
            }
            else if(value=="option3"){
                document.getElementById("searchByOption").action="/HTML/searchByLandmark";
            }
       }


</script>
</body>
</html>